<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-form class="form" ref="form" :inline="true">
      <el-form-item label="用户名:">
        <el-input placeholder="请输入你要搜索的用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button type="primary">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-button type="primary" size="default" icon="plus">添加职位</el-button>
    <el-table :data="roleList" border stripe>
      <el-table-column align="center" label="#" width="80px"></el-table-column>
      <el-table-column align="center" label="ID" prop="id"></el-table-column>
      <el-table-column align="center" label="职位名称" prop="roleName"></el-table-column>
      <el-table-column
        align="center"
        label="创建时间"
        show-overflow-tooltip
        prop="createTime"
      ></el-table-column>
      <el-table-column
        align="center"
        label="更新时间"
        show-overflow-tooltip
        prop="updateTime"
      ></el-table-column>
      <el-table-column align="center" label="操作" width="300px">
        <template #="{ row, $index }">
          <el-button type="primary" size="small" icon="user" @click="updateAcl(row)">
            分配权限
          </el-button>
          <el-button type="primary" size="small" icon="edit">编辑</el-button>
          <el-button type="primary" size="small" icon="delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="changeCurrent"
      v-model:currentPage="currentPage"
      :page-sizes="[20, 40, 80, 100]"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
      background
      :pager-count="7"
    ></el-pagination>
  </el-card>

  <el-drawer v-model="drawer" title="分配菜单与按钮的权限" :with-header="true">
    <el-tree
    ref="tree"
      style="max-width: 600px"
      :data="aclRoleList"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="checkedArr"
      :props="defaultProps"
    />
    <template #footer>
        <el-button type="primary" size="default" @click="confirm">确定</el-button>
        <el-button type="primary" size="default" >取消</el-button>
        
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reqUpdateRoleAcl, reqgetRoleAcl, reqgetRoleList } from '@/api/acl/role'
import type {
  records,
  roleData,
  roleDataChildren,
  roleDataRes,
  roleListRes,
} from '@/api/acl/role/type'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
let drawer = ref<boolean>(false)
let currentPage = ref<number>(1)
let pageSize = ref<number>(3)
let totalNum = ref<number>(33)
let roleList = ref<records>([])
let aclRoleList = ref<roleDataChildren>([])
let checkedArr = ref<number[]>([])
let roleAclId = ref<number>(0)
let tree = ref()
onMounted(() => {
  getRoleList()
})
const confirm = async () => {
  let arr = tree.value.getCheckedKeys()
  let arr1 = tree.value.getHalfCheckedKeys()
  let permissionId = arr.concat(arr1)
  let res:any = await reqUpdateRoleAcl(roleAclId.value,permissionId)
  if(res.code == 200) {
    getRoleList()
    drawer.value = false
  }
}
const updateAcl = async (row: roleDataRes) => {
  drawer.value = true
  roleAclId.value = row.id
  let res: roleData = await reqgetRoleAcl(row.id)
  if (res.code == 200) {
    aclRoleList.value = res.data
    checkedArr.value = checkhasAcl(aclRoleList.value,[])
  }
}
const checkhasAcl = (arr: any,initArr:any) => {
  arr.forEach((item: any) => {
    if (item.select && item.level == 4) {
      initArr.push(item.id)
    }
    if (item.children && item.children.length > 0) {
      checkhasAcl(item.children,initArr)
    }
  })
  return initArr  
}
const defaultProps = {
  children: 'children',
  label: 'name',
}
const changeCurrent = (page: number) => {
  getRoleList(page)
}
const getRoleList = async (pager = 1) => {
  currentPage.value = pager
  let res: roleListRes = await reqgetRoleList(currentPage.value, pageSize.value)
  console.log(res)

  if (res.code == 200) {
    totalNum.value = res.data.total
    roleList.value = res.data.records
  } else {
    ElMessage({
      message: '获取数据失败',
    })
  }
}
</script>
<style scoped lang="scss">
.form {
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 40px;
}
</style>
